//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
  height: 100%;
  background:url('../images/match/loginbg.png') no-repeat;
  //background:url('../images/match/loginbg.png') no-repeat center / 100% 100%;
  background-size:100%;
  //background-size:(1080/54)*1rem 43.555556rem;
}
.opening {
  width: 100%;
  position: relative;
  .blue_left {
    @include size(529,267);
    position: absolute;
    top: p2r(125);
    left: 0;
    background-color: #7382dd;
    border-top-right-radius: (529/54)*1rem;
    border-bottom-right-radius: (529/54)*1rem;
    .head_l {
      left: p2r(268);
      @include size(230,230);
      position: absolute;
      @include vc(230);
      background:url('http://127.0.0.1:8080/images/zhujiemian/2.pic.jpg') no-repeat center / 100% 100%;
      border-radius: 50%;
      border: (10/54)*1rem solid white;
    }
  }
  .red_right {
    @include size(529,267);
    position: absolute;
    top: p2r(872);
    right: 0;
    background-color: #b22634;
    border-top-left-radius: (529/54)*1rem;
    border-bottom-left-radius: (529/54)*1rem;
    .head_l {
      right: p2r(268);
      @include size(230,230);
      position: absolute;
      @include vc(230);
      background:url('http://127.0.0.1:8080/images/zhujiemian/2.pic.jpg') no-repeat center / 100% 100%;
      border-radius: 50%;
      border: (10/54)*1rem solid white;
    }
  }
  .big_bl{
    @include size(693,316);
    position: absolute;
    top: p2r(267+125);
    left: 0;
    background-color: #7382dd;
    border-top-right-radius: (693/54)*1rem;
    border-bottom-right-radius: (693/54)*1rem;
    .name{
      font-size: p2r(45);
      color: white;
      position: absolute;
      left: p2r(317);
      top:p2r(66);
      font-weight: 900;
    }
    .from{
      font-size: p2r(32);
      color: white;
      position: absolute;
      left: p2r(302);
      top:p2r(127);
    }
    .level{
      font-size: p2r(35);
      color: #53c69f;
      position: absolute;
      left: p2r(343);
      top:p2r(180);
      font-weight: 900;
    }
    .cost{
      font-size: p2r(35);
      color: white;
      position: absolute;
      left: p2r(294);
      top:p2r(233);
    }
  }
  .vs{
    font-size: p2r(107);
    color: #ffda10;
    text-align: center;
    position: relative;
    top:13.833333rem;
  }
  .big_br{
    @include size(693,316);
    position: absolute;
    top: p2r(872+267);
    right: 0;
    background-color: #b22634;
    border-top-left-radius: (529/54)*1rem;
    border-bottom-left-radius: (529/54)*1rem;
    .name{
      font-size: p2r(45);
      color: white;
      position: absolute;
      top:p2r(66);
      right: p2r(317);
    }
    .from{
      font-size: p2r(32);
      color: white;
      position: absolute;
      right: p2r(302);
      top:p2r(127);
    }
    .level{
      font-size: p2r(35);
      color: #53c69f;
      position: absolute;
      right: p2r(343);
      top:p2r(180);
      font-weight: 900;
    }
    .cost{
      font-size: p2r(35);
      color: white;
      position: absolute;
      right: p2r(294);
      top:p2r(233);
    }
  }
}